<!--
  @author duanzuocai
  @since 2018/10/23 15:12
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/common :: jscss">
    <title>新增或编辑部门</title>
</head>
<body>

<div class="layui-fluid">

    <blockquote class="layui-crumb">
        组织关系&nbsp;>&nbsp;
        <a lay-href="/mc/dept/list.action" lay-text="部门管理" th:text="部门管理">部门管理</a>
        >&nbsp;
        <span th:text="${dept.parentId == 0 ? '新增部门' : dept.deptName}"></span>
    </blockquote>

    <div class="layui-card">
        <form method="post" action="" class="layui-form" lay-filter="zmn-dept-form">

            <input type="hidden" name="deptId" th:value="${dept.deptId}"/>
            <input type="hidden" name="parentId" th:value="${parent.deptId}"/>

            <div class="layui-card-header" style="margin-top:10px;"><b>基本信息</b></div>
            <div class="layui-split">&nbsp;</div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">部门名称</label>
                <div class="layui-input-inline" style="width:400px;">
                    <input type="text" name="deptName" lay-verify="required" th:value="${dept.deptName}"
                           class="layui-input" maxlength="32" minlength="5"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级部门</label>
                <div class="layui-form-mid layui-word-aux">
                    <span th:text="${parent.deptName}">deptName</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门负责人</label>
                <div class="layui-input-inline">
                    <select name="keyStaffId" lay-search>
                        <option value="">请选择</option>
                        <option th:each="staff:${staffs}" th:value="${staff.staffId}" th:text="${staff.realName}"
                                th:selected="${staff.staffId == dept.keyStaffId}">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">排序</label>
                <div class="layui-input-inline" style="width:240px;">
                    <input type="text" name="sort" th:value="${dept.sort}" lay-verify="sort" class="layui-input" maxlength="6" minlength="1"/>
                </div>
                <div class="layui-form-mid layui-word-aux">越小越靠前</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option th:each="status:${statuses}" th:value="${status.key}" th:text="${status.value}" th:selected="${status.key == dept.status}">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">组织架构</label>
                <div class="layui-input-inline" style="width:600px;">
                    <select name="orgId" id="orgId" xm-select="orgSelect" lay-verify="required" th:if="${parent.deptId > 1}" disabled="disabled">
                        <option value="">请选择</option>
                    </select>
                    <select name="orgId" id="orgId" xm-select="orgSelect" lay-verify="required" th:if="${parent.deptId <= 1}">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <zmn th:if="${dept.deptId > 0}">
                <div class="layui-card-header"><b>其他信息</b></div>
                <div class="layui-split">&nbsp;</div>
                <div class="layui-form-item layui-form-item-xs">
                    <label class="layui-form-label">修改人/时间</label>
                    <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux" th:text="${dept.updater} + '&nbsp;/&nbsp;' + ${#dates.format(dept.updateTime, 'yyyy-MM-dd HH:mm:ss')}">修改人/时间</div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-item-xs">
                    <label class="layui-form-label">创建人/时间</label>
                    <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux" th:text="${dept.creater} + '&nbsp;/&nbsp;' + ${#dates.format(dept.createTime, 'yyyy-MM-dd HH:mm:ss')}">创建人/时间</div>
                    </div>
                </div>
            </zmn>

            <div class="layui-split">&nbsp;</div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn" lay-submit="" lay-filter="zmn-dept-form-submit">保存</button>
                        <button class="layui-btn layui-btn-primary" onclick="parent.layui.element.tabDelete('layadmin-layout-tabs', window.location.pathname + window.location.search)">取消</button>
                    </div>
                </div>
            </div>

        </form>

    </div>

</div>

<script type="text/javascript" th:inline="javascript">

    layui.config({
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
        art_dept_detail: "mc/dept/zmn.art.mc.dept.edit",
    }).use(['index', 'art_dept_detail']);

    function initSelect() {
        // 此函数用来初始化下拉选项框插件
        var formSelects = layui.formSelects;

        formSelects.config('orgSelect', {
            keyName: 'value',
            keyVal: 'key',
            keyChildren: 'list',
            success: function(id, url, val, result){
                formSelects.value('orgSelect', ['[[${organIds}]]']);
                console.log(id);
            },
            error: function(id, url, val, err){
                console.log(id + ":" +　err);
            }
        });

        /**
         * 1.多选数据赋值
         *
         * formSelects.data(ID, type, config);
         *
         * @param ID            xm-select的值
         * @param type          'local' | 'server', 本地数据或者远程数据
         * @param config        配置项
         *          arr             本地数据数组
         *          url             远程数据链接
         *          keyword         远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置
         *          linkage         是否为联动多选（就是把上级地扯关联一起显示/选择，true时必须全择到最底层一条线才行）
         *          linkageWidth    联动多选没级宽度
         */
        formSelects.data('orgSelect', 'server', {
            url: '/system/organ/findAllOrgan.action',
            linkage: false,
            linkageWidth: 130
        });
    }
    window.onload = initSelect;
</script>
<script>


</script>
</body>
</html>